<template>
  <div>
    <p>我是一个组件</p>
    <router-link to="/">返回首页</router-link>
    <!-- 这样写很直观 -->
    <router-link :to="'/cart?age=18&sex=male&job='+job">购物车</router-link>
    <router-link to="/404">404页面</router-link>
    <button @click="jump">点击跳转</button>
    <ul>
      <li v-for="(item, index) in goods" :key="index">
        <!-- 可以写成对象的形式，看起来高大上 -->
        <router-link 
        :to="'/product/'+item.sku">{{item.name}}</router-link>
        <button @click="showDetail(index)">{{index + 1}}. {{item.name}}</button>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      job: 'stu',
      goods: [
        {
          name: 'iphone',
          price: 9899,
          num: 10,
          sku: 'iphone-12'
        },
        {
          name: 'huawei',
          price: 8899,
          num: 30,
          sku: 'huawei-mate-40-pro'
        },
        {
          name: 'xiaomi',
          price: 7899,
          num: 45,
          sku: 'xiaomi-10-U'
        }
      ]
    };
  },
  components: {
    
  },
  methods: {
    jump() {
      // ...
      let num = 666;
      let name = 'Jack'
      this.$router.push('/cart?price=' + num + '&name=' + name);
    },
    // 跳转到对应的商品页面
    showDetail(index) {
      // 如果将push换成replace,就是url地址的替换
      // 也可以将push换成go，用法类似window.histroy.go(),正数表示前进；负数表示后退。
      this.$router.replace({
        path: '/cart',
        query: {
          id: index
        }
      });
    }
  },
};
</script>
<style lang="">
  .router-link-active {
    color: red;
  }
</style>